<!doctype html>
{php}
$static = '/static/home/';
{/php}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/login.css" rel="stylesheet" type="text/css" />
</head>
<body>

{include file='public/header'}

<div class="login-box">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="p-2">
                            <h5 class="mb-5 text-center">账号登录</h5>
                            <p class="text-right">还没有注册吗？<a href="{:url('user/register')}" class="color-green">去注册</a></p>
                            <form class="js-ajax-form">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group mb-4">
                                            <label >用户名</label>
                                            <input type="text" class="form-control" name="username" autocomplete="new-password" placeholder="请输入您的手机号或邮箱">
                                            <em for="username" class="invalid"></em>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label>密　码</label>
                                            <input type="password" class="form-control" name="password" autocomplete="new-password" placeholder="请输入您的密码">
                                            <em for="password" class="invalid"></em>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6"></div>
                                            <div class="col-md-6">
                                                <div class="text-md-right mt-3 mt-md-0">
                                                    <a href="javascript:void(0)" class="text-muted"><i class="mdi mdi-lock"></i> 忘记密码?</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-4 code-box" id="code-box"></div>
                                        <div class="mt-15">
                                            <button class="btn btn-primary btn-block waves-effect waves-light js-ajax-submit" type="submit">登 录</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>

<script type="text/javascript" src="{$static}libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="{$static}libs/node-waves/waves.min.js"></script>
<script type="text/javascript" src="{$static}libs/layer/layer.js"></script>

<script type="text/javascript" src="{$static}js/pages/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".js-ajax-form").validate({
            rules: {
                username: {
                    required: true,
                },
                password: {
                    required: true,
                    minlength: 8,
                    maxlength: 32
                }
            },
            messages: {
                username: {
                    required: "请输入您的邮箱地址或者手机号"
                },
                password: {
                    required: "请输入密码",
                    minlength: "请输入不少于8位长度密码",
                    maxlength: "密码的长度请不要超过32位"
                }
            },
            submitHandler: function() {
                $.ajax({
                    url: "{:url('user/loginAjax')}",
                    type: "POST",
                    data: $(".js-ajax-form").serialize(),
                    dataType: 'json',
                    beforeSend: function() {
                        $('.js-ajax-submit').text('正在登录...').addClass('btn-secondary').attr('disabled', 'disabled');
                    },
                    success: function (res) {
                        if (res.errorCode === 200) {
                            window.location.href = res.data.url;
                        } else {
                            if(res.errorCode === 300006 || res.errorCode === 100002) {
                                $('em[for=password]').css('display','block');
                                $('em[for=password]').text(res.message);

                            }else {
                                $('em[for=username]').css('display','block');
                                $('em[for=username]').text(res.message);

                                $('em[for=phone]').css('display','block');
                                $('em[for=phone]').text(res.message);
                            }
                        }
                        $('.js-ajax-submit').text('登 录').removeClass('btn-secondary').removeAttr('disabled');
                    }
                });
            }
        });
    });
</script>
</body>
</html>
